<template>
  <div class="detailPageCss">
    <div class="titleCss">查看职业健康检查数据详情</div>
    <div class="bodyCss">
      <div class="tableItemCss" v-for="(item, index) in tableList" :key="index">
        <div class="tableTitleCss">
          {{ item.tableTitleName }}
        </div>

        <div class="customTableCss">
          <table border="1">
            <tbody>
            <tr v-for="(trItem, trIndex) in item.tbodyTrList" :key="trIndex">
              <td
                :colspan="tdItem.colNum"
                :class="tdItem.isLabel ? 'tableLabelCss' : ''"
                v-for="(tdItem, tdIndex) in trItem.tdList"
                :key="tdIndex"
              >{{ tdItem.tdValue }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="bottomBtnCss">
      <el-button @click="goBackBtn">返回</el-button>
    </div>
  </div>
</template>

<script>
import { getHealthCheckDetail } from '@/api/zhangping/personDetail'

export default {
  data() {
    return {
      tableList: [],
      allObjValue: {},
      data4Map: {
        0: '上岗前',
        1: '在岗期间',
        2: '离岗前',
      },
      data5Map: {
        0: '是',
        1: '否',
      },
      data7Map: {
        0: '是',
        1: '否',
      },
      data9Map: {
        0: '终审退回',
        1: '待初审',
        2: '初审退回',
      },
      fullscreenLoading:null
    }

  },
  mounted() {
    localStorage.setItem('detailId',this.$route.query.info.id)
    this.initData()
  },
  methods: {
    openFullScreen2() {
      this.fullscreenLoading = this.$loading({
        lock: true,
        text: '正在加载数据',
        spinner: 'el-icon-loading',
        background: 'rgba(122,116,116,0.7)'
      });
      // setTimeout(() => {
      //   loading.close();
      // }, 2000);
  },
    initData() {
    this.openFullScreen2()
      getHealthCheckDetail(localStorage.getItem('detailId')).then(res => {
        this.fullscreenLoading.close()
        if (res && res.code === 200) {
          this.transformData(res.data)
          this.getTableList()
        }
      })
    },
    goBackBtn() {
      this.$router.back()
      let row={
        identityNumber:this.$route.query.info.identityNumber
      }
      const obj = {
        path: '/radiationHygiene/test/personDetail/healthReportDetail',
        query: {
          id: '111',
          info:row,
        }
      }
      this.$router.push(obj);
    },
    transformData(data) {
      const report = data.report
      const hazardList = data.hazardList || []
      const jobHistoryList = data.jobHistoryList || []
      const diseaseHistoryList = data.diseaseHistoryList || []
      const deviceList = data.deviceList || []

      // 用人单位情况
      this.allObjValue = {
        // 用人单位情况
        data1: report.enterpriseName || '无',
        data2: report.enterpriseName || '无',
        data3: report.creditCode || '无',
        data4: report.creditCode ? '是' : '否',
        data5: '无', // 行业类别
        data6: '无', // 经济类型
        data7: '无', // 企业规模
        data8: '无', // 联系人
        data9: report.contactNumber || '无',
        data10: '无', // 职工总人数
        data11: '无', // 接触职业病危害因素人数
        data12: '无', // 详细地址

        // 体检基本信息
        data25: report.code || '无',
        data26: report.personnelName || '无',
        data27: report.identityNumber ? (report.identityNumber.substr(16, 1) % 2 === 1 ? '男' : '女') : '无',
        data28: report.identityNumber || '无',
        data29: report.identityNumber ? `${report.identityNumber.substr(6, 4)}-${report.identityNumber.substr(10, 2)}-${report.identityNumber.substr(12, 2)}` : '无',
        data30: '无', // 婚姻状况
        data31: report.enterpriseName || '无',
        data32: '无', // 所属部门
        data33: report.workStatus === '1' ? '在岗' : '离岗',
        data34: report.examType || '无',
        data35: report.examOrgName || '无',
        data36: report.examTime || '无',
        data37: report.jobCategory || '无',
        data38: `${report.workingYear || 0}年${report.workingMonth || 0}月`,
        data39: `${report.workingHazardYear || 0}年${report.workingHazardMonth || 0}月`,
        data40: report.reportIssueTime || '无',
        data41: report.reportTime || '无',
        data42: report.monitorType || '无',
        data43: report.blnRecheck === '1' ? '是' : '否',
        data44: report.contactNumber || '无',
        data45: report.hazardFactor || '无',
        data46: report.examHazardFactor || '无',
        data47: report.examResult || '无',
        data48: report.chiefConclusion || '无',
        data49: report.chiefSuggestion || '无',

        // 月经史
        data50: report.menarcheAge || '无',
        data51: report.periodDays || '无',
        data52: report.cycleDays || '无',
        data53: report.menopauseAge || '无',
        data54: report.blnMenstrual === '1' ? '是' : '否',

        // 婚姻史
        data55: report.marriageDate || '无',
        data56: report.spouseRadiation || '无',
        data57: report.spouseJobHealth || '无',

        // 生育史
        data58: report.childrenNum || '0',
        data59: report.abortionTimes || '0',
        data60: report.pretermBirthTimes || '0',
        data61: report.stillbirthBirthTimes || '0',
        data62: report.teratomaTimes || '0',

        // 吸烟史
        data63: report.smokeSituation || '无',
        data64: report.smokeYear || '0',
        data65: report.smokeMonth || '0',
        data66: report.smokeDailyNum || '0',

        // 饮酒史
        data67: report.alcoholSituation || '无',
        data68: report.alcoholDailyMl || '0',
        data69: report.alcoholYear || '0',

        // 其他
        data70: report.familyHistory || '无',
        data71: report.personalHistory || '无',
        data72: report.others || '无'
      }

      // 危害因素结论明细
      if (hazardList.length > 0) {
        hazardList.forEach((item, index) => {
          this.allObjValue[`data${73 + index * 5}`] = index + 1
          this.allObjValue[`data${74 + index * 5}`] = item.hazard || '无'
          this.allObjValue[`data${75 + index * 5}`] = item.conclusion || '无'
          this.allObjValue[`data${76 + index * 5}`] = item.disease || '无'
          this.allObjValue[`data${77 + index * 5}`] = item.extraDescribe || '无'
        })
      }

      // 人员职业史
      if (jobHistoryList.length > 0) {
        jobHistoryList.forEach((item, index) => {
          this.allObjValue[`data${100 + index * 6}`] = `${item.startTime || ''}至${item.endTime || ''}`
          this.allObjValue[`data${101 + index * 6}`] = item.enterpriseName || '无'
          this.allObjValue[`data${102 + index * 6}`] = item.department || '无'
          this.allObjValue[`data${103 + index * 6}`] = item.jobCategory || '无'
          this.allObjValue[`data${104 + index * 6}`] = item.hazard || '无'
          this.allObjValue[`data${105 + index * 6}`] = item.protection || '无'
        })
      }

      // 既往病史
      if (diseaseHistoryList.length > 0) {
        diseaseHistoryList.forEach((item, index) => {
          this.allObjValue[`data${150 + index * 5}`] = item.disease || '无'
          this.allObjValue[`data${151 + index * 5}`] = item.diagnoseDate || '无'
          this.allObjValue[`data${152 + index * 5}`] = item.diagnoseUnit || '无'
          this.allObjValue[`data${153 + index * 5}`] = item.treatmentProcess || '无'
          this.allObjValue[`data${154 + index * 5}`] = item.outcome || '无'
        })
      }

      // 电测听
      if (deviceList.length > 0) {
        deviceList.forEach((device, dIndex) => {
          if (device.itemList && device.itemList.length > 0) {
            device.itemList.forEach((item, iIndex) => {
              this.allObjValue[`data${200 + dIndex * 10 + iIndex * 5}`] = item.name || '无'
              this.allObjValue[`data${201 + dIndex * 10 + iIndex * 5}`] = item.result || '无'
              this.allObjValue[`data${202 + dIndex * 10 + iIndex * 5}`] = `${item.referenceMin || ''}-${item.referenceMax || ''}`
              this.allObjValue[`data${203 + dIndex * 10 + iIndex * 5}`] = item.uom || '无'
              this.allObjValue[`data${204 + dIndex * 10 + iIndex * 5}`] = item.blnQualified === '1' ? '是' : '否'
            })
          }
        })
      }
    },
    setTbodyTrsTdListFun(list) {
      let colIndex = 0
      let tbodyTrs = [{
        tdList: [],
      }]

      list.forEach((item, index) => {
        const tdList = [{
          isLabel: true,
          tdValue: item.labelName,
          colNum: 1,
        }, {
          isLabel: false,
          tdValue: this.allObjValue[item.propsName] || '无',
          colNum: 1 + 2 * (item.colNum - 1),
        }]

        colIndex += item.colNum
        if (colIndex > 3) {
          colIndex -= 3
          tbodyTrs.push({
            tdList: [],
          })
        }
        tbodyTrs[tbodyTrs.length - 1]['tdList'] = [...tbodyTrs[tbodyTrs.length - 1]['tdList'], ...tdList]
      })

      return tbodyTrs
    },
    getTableList() {
      this.tableList = []

      let firstTableData = [{
        tableTitleName: '用人单位情况',
        list: [
          { labelValue: null, colNum: 1, propsName: 'data1', labelName: '所属地区：' },
          { labelValue: null, colNum: 1, propsName: 'data2', labelName: '用人单位名称：' },
          { labelValue: null, colNum: 1, propsName: 'data3', labelName: '社会信用代码：' },
          { labelValue: null, colNum: 1, propsName: 'data4', labelName: '是否分支机构：' },
          { labelValue: null, colNum: 1, propsName: 'data5', labelName: '行业类别：' },
          { labelValue: null, colNum: 1, propsName: 'data6', labelName: '经济类型：' },
          { labelValue: null, colNum: 1, propsName: 'data7', labelName: '企业规模：' },
          { labelValue: null, colNum: 1, propsName: 'data8', labelName: '联系人：' },
          { labelValue: null, colNum: 1, propsName: 'data9', labelName: '联系人电话：' },
          { labelValue: null, colNum: 1, propsName: 'data10', labelName: '职工总人数：' },
          { labelValue: null, colNum: 1, propsName: 'data11', labelName: '接触职业病危害因素人数：' },
          { labelValue: null, colNum: 1, propsName: 'data12', labelName: '详细地址：' },
        ],
        tbodyTrList: [],
      }, {
        tableTitleName: '体检基本信息',
        list: [
          { labelValue: null, colNum: 1, propsName: 'data25', labelName: '体检编号：' },
          { labelValue: null, colNum: 1, propsName: 'data26', labelName: '姓名：' },
          { labelValue: null, colNum: 1, propsName: 'data27', labelName: '性别：' },
          { labelValue: null, colNum: 1, propsName: 'data28', labelName: '证件号码：' },
          { labelValue: null, colNum: 1, propsName: 'data29', labelName: '出生日期：' },
          { labelValue: null, colNum: 1, propsName: 'data30', labelName: '婚姻状况：' },
          { labelValue: null, colNum: 1, propsName: 'data31', labelName: '单位名称：' },
          { labelValue: null, colNum: 1, propsName: 'data32', labelName: '所属部门：' },
          { labelValue: null, colNum: 1, propsName: 'data33', labelName: '在岗状态：' },
          { labelValue: null, colNum: 1, propsName: 'data34', labelName: '体检类型：' },
          { labelValue: null, colNum: 1, propsName: 'data35', labelName: '体检机构：' },
          { labelValue: null, colNum: 1, propsName: 'data36', labelName: '体检日期：' },
          { labelValue: null, colNum: 1, propsName: 'data37', labelName: '工种：' },
          { labelValue: null, colNum: 1, propsName: 'data38', labelName: '总工龄：' },
          { labelValue: null, colNum: 1, propsName: 'data39', labelName: '接害工龄：' },
          { labelValue: null, colNum: 1, propsName: 'data40', labelName: '报告出具日期：' },
          { labelValue: null, colNum: 1, propsName: 'data41', labelName: '报告日期：' },
          { labelValue: null, colNum: 1, propsName: 'data42', labelName: '监测类型：' },
          { labelValue: null, colNum: 1, propsName: 'data43', labelName: '是否复查：' },
          { labelValue: null, colNum: 2, propsName: 'data44', labelName: '联系电话：' },
          { labelValue: null, colNum: 3, propsName: 'data45', labelName: '接触危害因素：' },
          { labelValue: null, colNum: 3, propsName: 'data46', labelName: '体检危害因素：' },
          { labelValue: null, colNum: 3, propsName: 'data47', labelName: '体检结果：' },
          { labelValue: null, colNum: 3, propsName: 'data48', labelName: '主检结论：' },
          { labelValue: null, colNum: 3, propsName: 'data49', labelName: '主检建议：' },
        ],
        tbodyTrList: [],
      }, {
        tableTitleName: '危害因素结论明细',
        list: [
          { labelValue: null, colNum: 1, propsName: 'data73', labelName: '序号' },
          { labelValue: null, colNum: 1, propsName: 'data74', labelName: '体检危害因素' },
          { labelValue: null, colNum: 1, propsName: 'data75', labelName: '体检结论' },
          { labelValue: null, colNum: 1, propsName: 'data76', labelName: '病种名称' },
          { labelValue: null, colNum: 1, propsName: 'data77', labelName: '其他疾病或者异常描述' }
        ],
        tbodyTrList: [],
      }, {
        tableTitleName: '人员职业史',
        list: [
          { labelValue: null, colNum: 1, propsName: 'data100', labelName: '起止日期' },
          { labelValue: null, colNum: 1, propsName: 'data101', labelName: '工作单位名称' },
          { labelValue: null, colNum: 1, propsName: 'data102', labelName: '部门车间' },
          { labelValue: null, colNum: 1, propsName: 'data103', labelName: '工种' },
          { labelValue: null, colNum: 1, propsName: 'data104', labelName: '危害因素' },
          { labelValue: null, colNum: 1, propsName: 'data105', labelName: '防护措施' }
        ],
        tbodyTrList: [],
      }, {
        tableTitleName: '既往病史',
        list: [
          { labelValue: null, colNum: 1, propsName: 'data150', labelName: '疾病名称' },
          { labelValue: null, colNum: 1, propsName: 'data151', labelName: '诊断日期' },
          { labelValue: null, colNum: 1, propsName: 'data152', labelName: '诊断单位' },
          { labelValue: null, colNum: 1, propsName: 'data153', labelName: '治疗经过' },
          { labelValue: null, colNum: 1, propsName: 'data154', labelName: '危转归' }
        ],
        tbodyTrList: [],
      },
        {
          tableTitleName: '月经史',
          list: [
            { labelValue: null, colNum: 1, propsName: 'data50', labelName: '初潮(岁)：' },
            { labelValue: null, colNum: 1, propsName: 'data51', labelName: '经期(天)：' },
            { labelValue: null, colNum: 1, propsName: 'data52', labelName: '周期(天)：' },
            { labelValue: null, colNum: 1, propsName: 'data53', labelName: '停经年龄(岁)：' },
            { labelValue: null, colNum: 1, propsName: 'data54', labelName: '是否经期：' }
          ],
          tbodyTrList: [],
        }, {
          tableTitleName: '婚姻史',
          list: [
            { labelValue: null, colNum: 1, propsName: 'data55', labelName: '结婚日期：' },
            { labelValue: null, colNum: 2, propsName: 'data56', labelName: '配偶接触放射线情况：' },
            { labelValue: null, colNum: 3, propsName: 'data57', labelName: '配偶职业及健康状况：' }
          ],
          tbodyTrList: [],
        }, {
          tableTitleName: '生育史',
          list: [
            { labelValue: null, colNum: 1, propsName: 'data58', labelName: '现有子女（人）：' },
            { labelValue: null, colNum: 1, propsName: 'data59', labelName: '流产（次）：' },
            { labelValue: null, colNum: 1, propsName: 'data60', labelName: '早场（次）：' },
            { labelValue: null, colNum: 1, propsName: 'data61', labelName: '死场（次）：' },
            { labelValue: null, colNum: 1, propsName: 'data62', labelName: '畸胎（次）：' }
          ],
          tbodyTrList: [],
        }, {
          tableTitleName: '吸烟史',
          list: [
            { labelValue: null, colNum: 1, propsName: 'data63', labelName: '目前吸烟情况：' },
            { labelValue: null, colNum: 1, propsName: 'data64', labelName: '吸烟史（年）：' },
            { labelValue: null, colNum: 1, propsName: 'data65', labelName: '吸烟史（月）：' },
            { labelValue: null, colNum: 1, propsName: 'data66', labelName: '平均每天吸烟量（支）：' }
          ],
          tbodyTrList: [],
        }, {
          tableTitleName: '饮酒史',
          list: [
            { labelValue: null, colNum: 1, propsName: 'data67', labelName: '饮酒情况：' },
            { labelValue: null, colNum: 1, propsName: 'data68', labelName: '酒量（ml/天）：' },
            { labelValue: null, colNum: 1, propsName: 'data69', labelName: '酒龄（年）：' }
          ],
          tbodyTrList: [],
        }, {
          tableTitleName: '其他',
          list: [
            { labelValue: null, colNum: 3, propsName: 'data70', labelName: '家族史：' },
            { labelValue: null, colNum: 3, propsName: 'data71', labelName: '个人史：' },
            { labelValue: null, colNum: 3, propsName: 'data72', labelName: '其他：' }
          ],
          tbodyTrList: [],
        }, {
          tableTitleName: '电测听',
          list: [
            { labelValue: null, colNum: 1, propsName: 'data200', labelName: '项目' },
            { labelValue: null, colNum: 1, propsName: 'data201', labelName: '结果：' },
            { labelValue: null, colNum: 1, propsName: 'data202', labelName: '参考值：' },
            { labelValue: null, colNum: 1, propsName: 'data203', labelName: '计量单位：' },
            { labelValue: null, colNum: 1, propsName: 'data204', labelName: '合格：' }
          ],
          tbodyTrList: [],
        }]

      for (let i = 0; i < firstTableData.length; i++) {
        firstTableData[i].tbodyTrList = this.setTbodyTrsTdListFun(firstTableData[i].list)
      }
      this.tableList = [...firstTableData]
    }
  }
}
</script>

<style lang="scss" scoped>
.detailPageCss {
  overflow: hidden;
  position: relative;
  background-color: #fff;
  padding: 20px;
  padding-right: 0;
  border-radius: 10px;
  height: calc(100vh - 66px - 40px);
  display: flex;
  flex-direction: column;

  .titleCss {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 15px;
  }

  .bodyCss {
    width: calc(100% - 10px);
    margin-left: 10px;
    padding-right: 25px;
    height: calc(100% - 90px);
    overflow-y: auto;

    .tableItemCss {
      &:not(:first-child) {
        margin-top: 15px;
      }

      .tableTitleCss {
        background: linear-gradient(to bottom, #87B6D9, #71A6CF);
        color: white;
        padding: 5px;
        font-weight: bold;
        font-size: 14px;
      }

      .customTableCss {
        table {
          border-collapse: collapse;
          width: 100%;
          line-height: 34px;
          font-size: 13px;

          &:not(:first-child) {
            margin-top: 15px;
          }

          .tableLabelCss {
            font-weight: bold;
          }

          .tableValueCss {
            color: green;
            width: 200px;
            text-align: center;
            font-weight: bold;
          }
        }

        thead {
          background: linear-gradient(to bottom, #EAF4FD, #DFEFFC, #EBF5FD);
          color: #2E6EB2;
          line-height: 12px;
          font-weight: bold;
        }

        th, td {
          border: 1px solid #A8CAE3;
          padding: 8px;
          text-align: left;
        }

        th {
          background-color: #f2f2f2;
        }

        tr:last-child td {
          // border-bottom: none;
        }

        td:nth-child(2) {
          // border-right: none;
        }
      }
    }
  }

  .bottomBtnCss {
    margin-top: auto;
    text-align: right;
  }
}
</style>
